danabra.mov
my blog https://overreacted.io
1"use client";
2
3export function P(props: React.ComponentProps<"p">) {
4 return <p {...props} />;
5}
6
7export function H2({ id, children, ...props }: React.ComponentProps<"h2">) {
8 return (
9 <h2
10 id={id}
11 className="group relative text-3xl font-bold mt-2"
12 {...props}
13 >
14 <a href={`#${id}`} className="no-underline text-inherit">
15 <span
16 aria-hidden
17 className="absolute -translate-x-[1em] opacity-0 group-hover:opacity-70 group-focus-within:opacity-70 group-[:target]:opacity-70"
18 >
19 #
20 </span>
21 {children}
22 </a>
23 </h2>
24 );
25}
26
27export function H3({ id, children, ...props }: React.ComponentProps<"h3">) {
28 return (
29 <h3
30 id={id}
31 className="group relative text-2xl font-bold mt-2"
32 {...props}
33 >
34 <a href={`#${id}`} className="no-underline text-inherit">
35 <span
36 aria-hidden
37 className="absolute -translate-x-[1em] opacity-0 group-hover:opacity-70 group-focus-within:opacity-70 group-[:target]:opacity-70"
38 >
39 #
40 </span>
41 {children}
42 </a>
43 </h3>
44 );
45}
46
47export function H4({ id, children, ...props }: React.ComponentProps<"h4">) {
48 return (
49 <h4
50 id={id}
51 className="group relative text-xl font-bold mt-2"
52 {...props}
53 >
54 <a href={`#${id}`} className="no-underline text-inherit">
55 <span
56 aria-hidden
57 className="absolute -translate-x-[1em] opacity-0 group-hover:opacity-70 group-focus-within:opacity-70 group-[:target]:opacity-70"
58 >
59 #
60 </span>
61 {children}
62 </a>
63 </h4>
64 );
65}
66
67export function Blockquote(props: React.ComponentProps<"blockquote">) {
68 return (
69 <blockquote
70 className="relative -left-2 -ml-4 pl-4 italic opacity-80 border-l-[3px] border-current"
71 {...props}
72 />
73 );
74}
75
76export function UL(props: React.ComponentProps<"ul">) {
77 return <ul className="list-inside md:list-outside list-disc" {...props} />;
78}
79
80export function OL(props: React.ComponentProps<"ol">) {
81 return (
82 <ol className="list-inside md:list-outside list-decimal" {...props} />
83 );
84}
85
86export function LI(props: React.ComponentProps<"li">) {
87 return <li className="mb-3 last:mb-0" {...props} />;
88}
89
90export function Pre({
91 style,
92 ...props
93}: React.ComponentProps<"pre">) {
94 return (
95 <pre
96 className="-mx-4 overflow-y-auto p-4 text-sm"
97 {...props}
98 style={{
99 ...style,
100 clipPath: "var(--path, none)",
101 borderTopLeftRadius: "var(--radius-top, 12px)",
102 borderTopRightRadius: "var(--radius-top, 12px)",
103 borderBottomLeftRadius: "var(--radius-bottom, 12px)",
104 borderBottomRightRadius: "var(--radius-bottom, 12px)",
105 paddingTop: "var(--padding-top, 1rem)",
106 paddingBottom: "var(--padding-bottom, 1rem)",
107 }}
108 />
109 );
110}
111
112export function Code({
113 className,
114 ...props
115}: React.ComponentProps<"code"> & { "data-language"?: string }) {
116 // Code blocks have data-language from rehype-pretty-code (defaultLang ensures all blocks have it)
117 if ("data-language" in props) {
118 return <code className={className} {...props} />;
119 }
120 // Inline code styling
121 return (
122 <code
123 className="rounded-[10px] bg-[--inlineCode-bg] text-[--inlineCode-text] px-[0.2em] py-[0.15em] whitespace-normal"
124 {...props}
125 />
126 );
127}
128
129export function Table(props: React.ComponentProps<"table">) {
130 return <table className="w-full border-collapse" {...props} />;
131}
132
133export function Th(props: React.ComponentProps<"th">) {
134 return (
135 <th
136 className="border border-gray-300 dark:border-gray-600 p-2 text-left"
137 {...props}
138 />
139 );
140}
141
142export function Td(props: React.ComponentProps<"td">) {
143 return (
144 <td
145 className="border border-gray-300 dark:border-gray-600 p-2 text-left"
146 {...props}
147 />
148 );
149}
150
151export function Hr(props: React.ComponentProps<"hr">) {
152 return <hr className="opacity-60 dark:opacity-10 mt-4" {...props} />;
153}
154
155export function Img(props: React.ComponentProps<"img">) {
156 return <img className="max-w-full" {...props} />;
157}
158
159export function A(props: React.ComponentProps<"a">) {
160 return (
161 <a
162 className="border-b border-[--link] text-[--link]"
163 {...props}
164 />
165 );
166}